.searchResult {
  & {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FEFEFE;
  }

  .top {
    & {
      height: 0.6rem;
      width: 92%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .back {
      height: 0.18rem;
      width: 0.18rem;
    }

    .box {
      & {
        width: calc(100% - 0.48rem - 0.4rem);
        height: 0.36rem;
        border-radius: 0.06rem;
        background-color: #F5F5F5;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .s {
        height: 0.16rem;
        width: 0.16rem;
        margin-left: 0.12rem;
      }

      .x {
        margin-right: 0.12rem;
        height: 0.16rem;
        width: 0.16rem;
      }

      input {
        width: calc(100% - 0.32rem - 0.24rem - 0.2rem);
        color: #101010;
        font-size: 0.14rem;
        background-color: #F5F5F5;
        border: none;
      }

      input::-webkit-input-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }

      input:-moz-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }

      input::-moz-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }

      input:-ms-input-placeholder {
        color: #909497;
        font-size: 0.14rem;
      }
    }

    .btn {
      width: 0.4rem;
      font-size: 0.16rem;
      color: #101010;
    }

    .scroll {
      & {
        position: absolute;
        z-index: 100;
        top: 100%;
        width: 100%;
        height: 2.6rem;
        border-bottom-left-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;
        background-color: #efefef;
      }

      .imagine {
        & {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          border-bottom-left-radius: 0.1rem;
          border-bottom-right-radius: 0.1rem;
          background-color: #efefef;
          padding-bottom: 0.1rem;
        }

        .item {
          width: 92%;
          height: 0.38rem;
          align-self: center;
          // border-bottom: 0.6px solid var(--thin-line-color);
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 0.14rem;
          color: #9A9A9A;
        }
      }
    }
  }

  .scroll {
    & {
      height: calc(100% - 0.6rem);
      width: 92%;
    }

    .content {
      & {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .null {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 0.14rem;
        color: #909497;
      }

      .item {
        & {
          margin-top: 0.22rem;
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        img {
          height: 1.25rem;
          width: 1rem;
          object-fit: cover;
          border-radius: 0.03rem;
        }

        .info {
          & {
            height: 1.25rem;
            width: calc(100% - 1rem - 0.2rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }

          .name {
            font-size: 0.16rem;
            color: #101010;
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .introduce {
            color: #BEBEBE;
            width: 100%;
            font-size: 0.13rem;
            line-height: 0.2rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin-bottom: 0.1rem;
          }

          .bottom {
            & {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: flex-end;
            }

            .left {
              & {
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: 0.12rem;
                color: #CECECE;
                width: calc(100% - 0.5rem);
                overflow: hidden;
              }

              span {
                margin-right: 0.05rem;
              }
            }

            .rate {
              width: 0.5rem;
              height: 0.22rem;
              color: var(--error);
              font-size: 0.13rem;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 0.05rem;
              border: 0.8px solid var(--error);
            }
          }

        }
      }

      .itemxxx {
        & {
          margin-top: 0.22rem;
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        img {
          height: 1.25rem;
          width: 1rem;
          object-fit: cover;
          border-radius: 0.03rem;
        }

        .info {
          height: 1.25rem;
          width: calc(100% - 1rem - 0.2rem);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .box {
          & {
            display: flex;
            width: 100%;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
          }

          .name {
            font-size: 0.16rem;
            color: #101010;
            width: 75%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .rate {
            font-size: 0.16rem;
            color: #101010;
          }
        }

        .center {
          & {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 0.12rem;
            color: #CECECE;
            color: #101010;
          }

          span {
            margin-right: 0.05rem;
          }
        }

        .introduce {
          font-size: 0.12rem;
          color: #CECECE;
          line-height: 0.2rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

      }

      .nomore {
        & {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin-top: 0.3rem;
          margin-bottom: 0.1rem;
        }

        .line {
          width: 0.55rem;
          height: 0.8px;
          background-color: #E6E6E6;
        }

        span {
          color: #BEBEBE;
          font-size: 0.13rem;
        }
      }
    }
  }
}
